<script lang="tsx">
import {Component, Provide, Vue,} from 'vue-property-decorator'
import Child from "./Child.vue"
const symbol = Symbol('baz')


/**
 * const symbol = Symbol('baz')

 export const MyComponent = Vue.extend({
  inject: {
    foo: 'foo',
    bar: 'bar',
    optional: { from: 'optional', default: 'default' },
    baz: symbol,
  },
  data() {
    return {
      foo: 'foo',
      baz: 'bar',
    }
  },
  provide() {
    return {
      foo: this.foo,
      bar: this.baz,
    }
  },
})
 */

@Component
export default class App extends Vue {
    @Provide()
    foo = "foo123"

    @Provide("bar")
    baz = "bar1111"

    @Provide("optional")
    optional = "optional张"

    @Provide("baz")
    fengliulin = "symbol"

    render() {
        console.log()
        return (
            <div>
                <Child></Child>
            </div>
        )
    }
}
</script>

<style scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
